<template>
  <view
    class="container"
    :style="'padding-top: ' + (navbar.top + navbar.height + 6) + 'px'"
  >
    <view
      class="navbar"
      :style="'height: ' + (navbar.top + navbar.height + 6) + 'px;'"
    >
      <view
        class="inner"
        :style="
          'padding: ' +
          navbar.top +
          'px ' +
          (window.windowWidth - navbar.right + navbar.width + 10) +
          'px 0 62px'
        "
      >
        <!-- 扫一扫 -->
        <view
          class="scan"
          :style="
            'top: ' +
            (navbar.top + 5) +
            'px;left: ' +
            (window.windowWidth - navbar.right) +
            'px;height: ' +
            navbar.height +
            'px'
          "
          @tap="mesClick"
        >
          <view class="label">
            {{ city }}
            <van-icon size="10px" name="arrow-down" />
          </view>
        </view>

        <!-- 搜索 -->
        <view class="search" @tap="visitSearch">
          <van-search
            readonly
            custom-class="search-round"
            placeholder="请输入搜索关键词"
            background="#f4f4f4"
          />
        </view>
      </view>
    </view>
    <template v-if="loading == 1">
      <swiper
        :indicator-dots="true"
        :autoplay="true"
        interval="5000"
        duration="500"
        class="banner"
        indicator-color="#ffffff"
        indicator-active-color="#fa3e3e"
        @change="bindchange"
        :style="{ height: imgheights[curBannerHeight] + 'rpx' }"
      >
        <block v-for="(item, index) in swiper" :key="index">
          <swiper-item>
            <view :data-url="item.adurl" @tap="golink">
              <image
                :src="$imageOSS(item.adimg)"
                class="slide-image"
                mode="widthFix"
                @load="imageLoad"
                :data-id="index"
              />
            </view>
          </swiper-item>
        </block>
      </swiper>
    </template>
    <tab-bar ref="tabbar"></tab-bar>
  </view>
</template>

<script>
import { getImage, getPage, getTabbar } from '../../utils/config'
import api from '../../utils/api'
import {
  http,
  storage,
  promisify,
  $toast,
  $loading,
  $query,
} from '../../utils/utils'
import wxApi from '../../utils/wxApi'
import { headerInfo } from '../../utils/env'
let app = getApp()
let topStyle
let leftStyle
let tipTopStyle
{
  let { height, right, menuWidth } = headerInfo
  leftStyle = `right: ${menuWidth / 2 / 2 + right}px`
  tipTopStyle = `top: ${height}px;`
  topStyle = `top: ${height + 10}px;`
}
export default {
  data() {
    return {
      getImage: getImage,
      getPage: getPage,
      logged: 0,
      loading: 0,
      userId: 0,

      navbar: {
        top: '',
        height: '',
        right: 0,
        width: '',
      },

      window: { windowWidth: 0, },

      city: '',
      hfListIndex: 0,
      botZtListIndex: 0,
      timesHours: 0,
      guize: {},
      timesMinute: 0,
      timesSecond: 0,
      goodsNavFix: false,
      goodsNavType: 1,
      goodsList: [],
      goodsListPage: 1,
      goodsListPages: 0,
      loadmore: true,
      loaddone: false,
      popupShow: false,
      popupShow1: false,
      popupShowTip: false,
      showwellcome: false,
      tipTopStyle: tipTopStyle,
      leftStyle: leftStyle,
      topStyle: topStyle,
      imgheights: {},
      curBannerHeight: 0,
      curshop: 0,
      value1: 0,

      option1: [
        {
          text: '智能排序',
          value: 0,
        },
        {
          text: '离我最近',
          value: 1,
        },
        {
          text: '评分从高到低',
          value: 2,
        },
      ],

      swiper: '',

      notice: { list: [], },

      wellcomepic: '',
      HomeActivityTitle: '',
      homeshop: '',
      property: '',
      shops: [],
      data: '',
      botZtList: [],
      category: [],
    }
  },
  onLoad() {
    var _this = this
    var first = 0
    uni.getLocation({
      type: 'wgs84',
      success(res) {
        if (!uni.getStorageSync('mylocation')) {
          storage.set('mylocation', res)
        }
        var mylocation = JSON.parse(uni.getStorageSync('mylocation'))
        if (app.globalData.zoneid == 0 || res.latitude != mylocation.latitude) {
          //获取设置城市id
          storage.set('mylocation', res)
          console.log('latitude>>>>>>>>>>>>>', res)
          //获取设置城市id
          http
            .post(
              api.default,
              {
                data: {
                  action: 'getzonebylocation',
                  location: res.longitude + ',' + res.latitude,
                },
              },
              false
            )
            .then(res => {
              const { data } = res.data
              if (data != null) {
                app.globalData.zoneid = data.region_id
                app.globalData.zone = data
                _this.city = app.globalData.zone.shortname
              }
              if (first == 0) {
                _this.getProductsInfo(res => {
                  _this.$set(goodsList, res.list)
                  _this.$set(loadmore, false)
                })
                first = 1
              }
            })
        }
        const latitude = res.latitude
        const longitude = res.longitude
        const speed = res.speed
        const accuracy = res.accuracy
      },
    })
    http
      .get(
        api.default,
        { data: { action: 'apphome', }, },
        false
      )
      .then(res => {
        const { data } = res.data
        this.swiper = data.ban_list
        ;(this.notice = data.noticelist),
          (this.loading = 1),
          (this.wellcomepic = data.wellcomepic),
          (this.showwellcome = data.showwellcome),
          (this.HomeActivityTitle = data.HomeActivityTitle),
          (this.homeshop = data.homeshop)
      })

    //获取system信息
    promisify(uni.getSystemInfo)().then(res => {
      //获取右上角胶囊信息
      this.navbar = uni.getMenuButtonBoundingClientRect()
      this.window = res
    })
  },
  methods: {
    imageLoad(e) {
      //获取图片真实宽度
      var imgwidth = e.detail.width,
        imgheight = e.detail.height,
        //宽高比
        ratio = imgwidth / imgheight
      //计算的高度值
      var viewHeight = 750 / ratio
      var imgheight = viewHeight
      var imgheights = this.imgheights
      //把每一张图片的对应的高度记录到数组里
      imgheights[e.target.dataset.id] = imgheight
      this.$set(this.imgheights, imgheights)
    },
    bindchange(e) {
      this.curBannerHeight = e.detail.current
    },
    mesClick(e) {
      // wxApi.navigateTo('/pages/location/index');
    },
    // 搜索
    visitSearch() {
      // wxApi.navigateTo(getPage.search);
    },
    /**
     * 获取产品数据
     */
    getProductsInfo(cb, a = false) {
      let { goodsNavType, goodsListPage, goodsListPages, loaddone } = this
      var latitude = 0
      var longitude = 0
      var mylocation = null
      if (
        uni.getStorageSync('mylocation') == '' &&
        app.globalData.zone == null
      ) {
        wxApi.navigateTo('/pages/location/index')
        return
      } else if (uni.getStorageSync('mylocation') != '') {
        mylocation = JSON.parse(uni.getStorageSync('mylocation'))
        latitude = mylocation.latitude
        longitude = mylocation.longitude
      } else {
        latitude = app.globalData.zone.lat
        longitude = app.globalData.zone.lng
      }
      console.log(app.globalData.zone)
      http
        .post(
          api.default,
          {
            data: {
              action: 'GetShopList',
              pagesize: 10,
              pageindex: goodsListPage,
              latitude: latitude,
              longitude: longitude,
            },
          },
          a
        )
        .then(res => {
          const { data } = res.data
          //是否加载完毕
          if (goodsListPage == data.pages) {
            loaddone = true
          }
          this.setData({
            goodsListPages: data.pages,
            loaddone,
          })
          if (cb) {
            cb(data)
          }
        })
    },
  },
}
</script>

<style lang="scss" scoped>
@import './home.css';
</style>
